<template>
    <div class="contentImg">
        <div class="img">
            <img :src= this.meUrl>
            <slot name="myName"></slot>
        </div>
        <div class="address">
            <p><img src="@/assets/img/common/home/address.png"> <slot name="myAddress"></slot></p>
            <p>
                <a href="javascript:;" @click="upagivNum">
                    <img src="@/assets/img/common/home/meigui.png" title="为我点赞">
                    <slot name="content"></slot>
                </a>
            </p>
        </div>
    </div>
</template>

<script>
import {addAgivNum} from '@/network/home/home'

export default {
    name:'contentImg',
    props:{
        meUrl:String
    },
    methods:{
        upagivNum(){
            this.$parent.info.agivNum++
            addAgivNum().then( res => {
                //console.log(res)
            }).catch( err => {
                console.log(err)
            })
        }
    }
}
</script>

<style scoped>
.contentImg{
    padding-top: 50px;
    width: 100%;
    border-bottom:1px solid #a39b9b;
}
.contentImg .img{
    width: 100%;
    text-align: center;
}
.contentImg .img img{
    width: 150px;
    height: 150px;
    border-radius: 50%;
}
.contentImg p{
    font-size: 25px;
    font-weight: bold;
    color: rgb(88, 86, 86);
}
.contentImg .address p{
    display: inline-block;
    width: 45%;
    margin: 0;
}
.contentImg .address p span{
    color: rgb(88, 86, 86);
    font-size: 16px;
}
.contentImg .address p:nth-child(1) {
    margin-left: 20px;
}
.contentImg .address p:nth-child(1) span{
    height: 24px;
    margin-left: 20px;
}
.contentImg .address p:nth-child(2){
    text-align: right;
}
.contentImg .address p:nth-child(2) span{
    font-size: 25px;
    margin-left: 15px;
}
</style>